import 'package:flutter/material.dart';

class CategoryIndex extends StatefulWidget {
  const CategoryIndex({super.key});

  @override
  CategoryIndexState createState() => CategoryIndexState();
}

class CategoryIndexState extends State<CategoryIndex> {
  // 示例分类数据
  final List<String> categories = [
    '食品',
    '电器',
    '洗护',
    '女装',
    '手机',
    '健康',
    '男装',
    '美妆',
    '电器',
    '运动',
    '运动2',
    '运动3',
    '运动4',
    '运动5',
  ];

  // 示例商品数据
  final List<Map<String, String>> products = [
    {
      'name': '图片1',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片2',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片3',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片4',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片5',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片6',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片7',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片8',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片9',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片10',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片11',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },

    {
      'name': '图片1',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片2',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片3',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片4',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片5',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片6',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片7',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片8',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片9',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片10',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    {
      'name': '图片11',
      'image':
          'https://ts3.tc.mm.bing.net/th/id/OIP-C.MK_lxgnnVjHGRJdwiVHnNAAAAA?r=0&pid=ImgDet&w=400&h=400&rs=1',
    },
    // 添加更多商品数据...
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: TextField(
            // textAlignVertical: TextAlignVertical.center,
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.search),
              hintText: '搜索商品',
              filled: true,
              fillColor: Colors.white,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30.0),
                borderSide: BorderSide.none,
              ),
              suffixIcon: Padding(
                padding: EdgeInsets.only(top: 15), // 设置四周边距
                child: Text('搜索', style: TextStyle(fontSize: 16)),
              ),
              contentPadding: EdgeInsets.zero,
              isDense: true,
            ),
          ),
        ),
        elevation: 0, // 可选，设置阴影高度为0，使AppBar与背景无缝衔接
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          children: [
            // 商品分类列表和商品展示列表的两栏布局
            Expanded(
              child: Row(
                children: [
                  // 商品分类列表
                  Expanded(
                    flex: 1, // 分类列表占1份
                    child: ListView.builder(
                      itemCount: categories.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Center(child: Text(categories[index])),
                          onTap: () {
                            // 点击分类的处理逻辑
                          },
                        );
                      },
                    ),
                  ),
                  // 商品展示列表
                  Expanded(
                    flex: 3, // 商品展示列表占3份
                    child: Container(
                      padding: EdgeInsets.only(top: 15),
                      child: GridView.builder(
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3, // 每行显示3列
                          crossAxisSpacing: 1, // 列间距
                          mainAxisSpacing: 1, // 行间距
                          childAspectRatio: 1, // 子项宽高比
                        ),
                        itemCount: products.length,
                        itemBuilder: (context, index) {
                          return Column(
                            children: [
                              Image.network(
                                products[index]['image']!,
                                width: 60, // 设置图片宽度
                                height: 60, // 设置图片高度
                                fit: BoxFit.cover,
                              ),
                              Padding(
                                padding: const EdgeInsets.all(2),
                                // 缩小文本与图片之间的间距
                                child: Text(
                                  products[index]['name']!, // 使用示例商品数据中的名称
                                  style: TextStyle(fontSize: 14), // 缩小字体大小
                                ),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
